<template>
  <div>
    <div class="u_content_box">
      <div class="u_content_top">
        <div>
          <a-button type="primary" icon="plus" @click="add">新增</a-button>
        </div>
        <!-- <div>
                <a-input-group compact>
                  <a-input-search placeholder="请输入" style="width: 300px" enter-button @search="onSearch" />
                </a-input-group>
              </div> -->
      </div>
      <div class="u_content_input">
        <a-table :columns="columns" size="small" :pagination="false" :data-source="list" @change="handleTableChange2"
          :scroll="{ y: 400, x: 1300 }">

          <span slot="image" slot-scope="image">
            <img :src="'https://cdn.fanzhuankj.top/' + image" alt="" class="goodsImg">
          </span>
          <!-- 删除 -->
          <a-popconfirm title="确定要删除嘛?" @confirm="() => shanchu(record._id)" slot="cancle" slot-scope="text, record">
            <a>删除</a>
          </a-popconfirm>
          <!-- 编辑 -->
          <a slot="edit" slot-scope="text, record" @click="() => edit(record)">编辑</a>
        </a-table>
      </div>
    </div>
    <div style="display: flex;justify-content: end;"> <a-pagination @change="changePage" v-model:current="current"
        :total="total" show-less-items /></div>
    <edit v-if="editflag" :flag="editflag" :list="editList" @func="show"></edit>
    <loading v-if="load == 0" class="loading"></loading>
    <router-view />
  </div>
</template>

<script>
const columns = [
  {
    title: "ID",
    dataIndex: "_id",
    key: "_id",
    align: "center",
    width: 120,

    fixed: "left",
  },

  {
    title: "作者",
    width: 110,
    dataIndex: "author",
    key: "author",
    align: "center",
  },
  {
    title: "系列",
    width: 110,
    dataIndex: "seriesName",
    key: "seriesName",
    align: "center",
  },
  {
    title: "集数",
    width: 90,
    dataIndex: "chapter",
    key: "chapter",
    align: "center",
  },
  {
    title: "安卓价格",
    width: 90,
    dataIndex: "price",
    key: "price",
    align: "center",
  },
  {
    title: "苹果价格",
    width: 90,
    dataIndex: "priceIos",
    key: "priceIos",
    align: "center",
  },
  {
    title: '收益(宏琦舍)',
    width: 110,
    dataIndex: "totalDyPriceAll",
    key: 'totalDyPriceAll',
    align: "center",
  },
  {
    title: '订单数(宏琦舍)',
    width: 110,
    dataIndex: "totalDyPriceNum",
    key: 'totalDyPriceNum',
    align: "center",
  },
  {
    title: '收益(一品布衣)',
    width: 110,
    dataIndex: "totalKsPriceAll",
    key: 'totalKsPriceAll',
    align: "center",
  },
  {
    title: '订单数(一品布衣)',
    width: 110,
    dataIndex: "totalKsPriceNum",
    key: 'totalKsPriceNum',
    align: "center",
  },
  {
    title: '收益(深海漫)',
    width: 110,
    dataIndex: "totalKsPriceAllQd",
    key: 'totalKsPriceAllQd',
    align: "center",
    customRender: (state) => { // customRender属性是一个方法，可接收三个参数（val,row,index），分别是当前值、当前行数据和当前索引，与方式 1 中模版的 slot-scope 属性传参类似
       if(state){
         return state
       } else {
         return 0
       }
    },
  },
  {
    title: '订单数(深海漫)',
    width: 110,
    dataIndex: "totalKsPriceNumQd",
    key: 'totalKsPriceNumQd',
    align: "center",
    customRender: (state) => { // customRender属性是一个方法，可接收三个参数（val,row,index），分别是当前值、当前行数据和当前索引，与方式 1 中模版的 slot-scope 属性传参类似
       if(state){
         return state
       } else {
         return 0
       }
    },
  },

  {
    title: "描述",
    width: 150,
    dataIndex: "detail",
    key: "detail",
    align: "center",
  },
  {
    title: "视频",
    width: 150,
    dataIndex: "videoUrl",
    key: "videoUrl",
    align: "center",
  },


  {
    title: "创建时间",
    width: 150,
    dataIndex: "create_time",
    key: "create_time"
  },
  {
    title: "",
    key: "edit",
    fixed: "right",
    width: 60,
    scopedSlots: { customRender: "edit" },
    align: "center",
  },
  {
    title: "",
    key: "cancle",
    fixed: "right",
    width: 60,
    scopedSlots: { customRender: "cancle" },
    align: "center",
  },
]
const ipagination = {
  current: 1,
  pageSize: 10,
  pageSizeOptions: ["10"],
  showTotal: (total, range) => {
    return range[0] + "-" + range[1] + " " + "共" + total + "条"
  },
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
}

import edit from "./souyeEdit.vue"
import loading from "../../components/loading.vue"
import { indexList, indexDel, getImgToken, getYunToken, getVideoList, deleteVideo } from "../../http/api"
export default {
  name: "userMsg",
  data () {
    return {
      //搜索
      searchKey: "",
      searchText: "",
      columns,
      list: [],
      ipagination: {},
      editflag: false,
      editList: {},
      page: 1,
      load: 1, //加载中
      current: 1,
      imgToken: '',
      userInfo: {},
      skip: 0,
      total: 0
    }
  },
  created () {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.ipagination.current = 1
    this.getList()
    this.getImgToken()
  },
  methods: {
    //分页
    changePage (e) {
      console.log(e)
      this.skip = (e - 1) * 10
      this.getList()
    },
    //搜索
    onSearch (e) {
      this.searchText = e
      this.page = 1
      this.ipagination.current = 1
      this.indexList(this.page, this.$store.state.user.shopId)
    },
    //删除
    shanchu (_id) {
      console.log(_id)

      this.deleteVideo(_id)
    },
    //编辑
    edit (list) {
      // console.log(list);
      this.editflag = true
      list.imgToken = this.imgToken
      this.editList = list
    },
    //新增    
    async add () {

      this.editflag = true
      this.editList = {}

      this.editList.imgToken = this.imgToken

    },
    //子组件传值展示model框
    show (e) {
      // console.log(e);
      this.editflag = e
      this.list = []
      // this.indexList(this.page, this.$store.state.user.shopId)
      this.getList()
    },
    //分页
    handleTableChange2 (pagination, filters, sorter) {
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize
      this.page = pagination.current
      this.indexList(this.page, this.$store.state.user.shopId)
    },
    //视频列表
    async getList () {
      this.load = 0
      const parameter = {
        "$url": "getVideoListAdmin",
        "skip": this.skip,
        "authorID": this.userInfo._id,

      }
      const res = await getVideoList(parameter)
      console.log('视频数据列表', res)
      var d = res.res
      this.load = 1

      this.total = res.total_count.total
      d.data.forEach(item => {
        item.totalKsPriceAll = ((item.totalKsPriceAll ? item.totalKsPriceAll : 0) / 1000).toFixed(2)
        item.totalKsPriceAllQd = ((item.totalKsPriceAllQd ? item.totalKsPriceAllQd : 0) / 1000).toFixed(2)
        item.totalDyPriceAll = ((item.totalDyPriceAll ? item.totalDyPriceAll : 0) / 1000).toFixed(2)
        item.totalDyPriceNum = item.totalDyPriceNum ? item.totalDyPriceNum : 0
        item.totalKsPriceNum = item.totalKsPriceNum ? item.totalKsPriceNum : 0
        item.totalKsPriceNumQd = item.totalKsPriceNumQd ? item.totalKsPriceNumQd : 0
        if (item.price == 0) {
          item.price = 0
        } else {
          item.price = item.price ? item.price / 100 : 0.88
        }
        if (item.priceIos == 0) {
          item.priceIos = 0
        } else {
          item.priceIos = item.priceIos ? item.priceIos / 100 : 0.88
        }

      })

      this.list = d.data
    },
    async deleteVideo (_id) {
      const parameter = {
        "$url": "deleteVideo",
        "_id": _id


      }
      const res = await deleteVideo(parameter)
      console.log('删除首推', res)
      if (res.code == 200) {
        this.$tishi("success", res.msg)
        if ((this.ipagination.total - 1) % this.ipagination.pageSize == 0 && (this.page - 1) != 0) {
          this.page = this.page - 1
        }
        this.list = []
        this.getList()
      } else {
        this.$tishi("warning", res.msg)
      }
    },
    async getImgToken () {
      return
      const parameter = {
        "$url": "getYunToken",
      }
      const res = await getYunToken(parameter)
      console.log('云点播签名====', res)


      this.imgToken = res.uploadToken
    },
  },
  components: {
    edit,
    loading,
  },
}
</script>

<style scoped>
.u_content_box {
  width: 100%;
}

.u_content_top {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
}

.u_content_input {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #efefef;
}

.u_userImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.editable-row-operations a {
  margin-right: 8px;
}

.goodsImg {
  width: 70rem;
  height: 70rem;
  border-radius: 4rem;
}
</style>